<template>
  <view class="comment-wrapper" :data-theme="globPrimary">
    <view class="comment-head">
      <view class="star">
        <view class="num">{{ star }}分</view>
        <u-rate
          v-model="star"
          disabled
          inactive-color="#DCDFE6"
          active-color="#FF8A52"
          inactive-icon="star-fill"
          size="40"
        ></u-rate>
      </view>
      <view class="check" v-if="hasComment"
        ><u-checkbox v-model="isChecked" :activeColor="globPrimaryColor">只看我的</u-checkbox></view
      >
      <view class="btn" v-else @click="handleRemark">评论</view>
    </view>
    <!-- 我的评论 -->
    <view class="comment" v-if="isChecked">
      <block v-if="!$u.test.empty(myCommentData)">
        <view class="heart-photo"
          ><u-avatar
            :src="myCommentData.user.avatar_url"
            size="64"
            @click="onUser(myCommentData.user.id)"
          ></u-avatar
        ></view>
        <view class="right">
          <view class="user-info">
            <view class="name u-line-1">
              {{ myCommentData.user.nick_name }}
            </view>
            <u-rate
              v-model="myCommentData.star"
              disabled
              inactive-color="#DCDFE6"
              active-color="#FF8A52"
              inactive-icon="star-fill"
              size="28"
            ></u-rate>
            <view class="modify" @click="handleRemark"
              ><u-icon name="edit-pen-fill" size="30" color="#909399"></u-icon
            ></view>
          </view>
          <view class="content">
            {{ myCommentData.content }}
          </view>
          <view class="bottom">
            <view class="date">
              {{ myCommentData.create_time | timeFrom('yyyy-mm-dd') }}
            </view>
            <view
              v-if="myCommentData.user_id == glob_user_id"
              class="del"
              @click="handleDeleteComment(myCommentData.id)"
              >删除</view
            >
            <view class="reply" @click="toAllReply(myCommentData.id)">
              <!-- #ifndef APP-PLUS -->
              <u-icon name="pinglun" custom-prefix="edu-icon" size="40" color="#909399"></u-icon>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <u-icon name="chat" size="40" color="#909399"></u-icon>
              <!-- #endif -->
              <view class="num">
                {{ myCommentData.reply_count }}
              </view>
            </view>
            <view
              class="like"
              :class="{ highlight: myCommentData.like == 1 }"
              @tap="getLike(myCommentData.id, myCommentData.like)"
            >
              <u-icon
                :name="myCommentData.like == 1 ? 'thumb-up-fill' : 'thumb-up'"
                :size="40"
                :color="myCommentData.like == 1 ? '#FF8A52' : '#909399'"
              ></u-icon>
              <view class="num">
                {{ myCommentData.like_count }}
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 所有评论 -->
    <view class="all-comment" v-show="!isChecked">
      <view class="comment" v-for="(item, index) in commentList" :key="index">
        <view class="heart-photo" v-if="!$u.test.empty(item.user)"
          ><u-avatar :src="item.user.avatar_url" size="64" @click="onUser(item.user.id)"></u-avatar
        ></view>
        <view class="right">
          <view class="user-info">
            <view class="name u-line-1" v-if="!$u.test.empty(item.user)">{{
              item.user.nick_name
            }}</view>
            <u-rate
              :current="item.star"
              disabled
              inactive-color="#DCDFE6"
              active-color="#FF8A52"
              inactive-icon="star-fill"
              size="28"
            ></u-rate>
            <!-- 当前的用户可以修改 -->
            <view class="modify" @click="handleRemark" v-if="item.user_id == glob_user_id"
              ><u-icon name="edit-pen-fill" size="30" color="#909399"></u-icon
            ></view>
          </view>
          <view class="content">{{ item.content }}</view>
          <view class="bottom">
            <view class="date">{{ item.create_time | timeFrom('yyyy-mm-dd') }}</view>
            <view
              v-if="item.user_id == glob_user_id"
              class="del"
              @click="handleDeleteComment(item.id)"
              >删除</view
            >
            <view class="reply" @click="toAllReply(item.id)">
              <u-icon name="pinglun" custom-prefix="edu-icon" size="40" color="#909399"></u-icon>
              <view class="num">{{ item.reply_count }}</view>
            </view>
            <view
              class="like"
              :class="{ highlight: item.like == 1 }"
              @tap="getLike(item.id, item.like)"
            >
              <u-icon
                :name="item.like == 1 ? 'thumb-up-fill' : 'thumb-up'"
                :size="40"
                :color="item.like == 1 ? '#FF8A52' : '#909399'"
              ></u-icon>
              <view class="num">{{ item.like_count }}</view>
            </view>
          </view>
        </view>
      </view>
      <edu-empty v-if="$u.test.empty(commentList)"></edu-empty>
    </view>

    <edu-user-coupon></edu-user-coupon>

    <u-modal
      show-cancel-button
      v-model="deleteVisible"
      :show-title="false"
      cancel-text="取消"
      confirm-text="删除"
      content="确认删除该条评论?"
      :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
      cancel-color="#606266"
      :confirm-color="globPrimaryColor"
      @confirm="handleDeleteConfirm"
    >
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    detailsInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      isChecked: false,
      star: 0,
      hasComment: false,
      myCommentData: {},
      commentList: [],
      deleteVisible: false,
      deleteCurrentId: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
    // 当前用户是自己id
    glob_user_id() {
      if (this.$u.test.empty(this.userInfo)) return 0
      return this.userInfo.id
    },
  },
  methods: {
    // 评论列表
    getCommentList(page, mescroll) {
      let params = {
        page: page.num,
        count: page.size,
      }
      this.$edu.api
        .getCourseComment(this.detailsInfo.id, {
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          this.star = data.star
          this.hasComment = data.has_comment
          this.myCommentData = data.my_comment
          let list = data.list
          if (page.num == 1) this.commentList = []
          if (this.$u.test.empty(list)) {
            mescroll.endSuccess(0)
          } else {
            this.commentList = this.commentList.concat(list.data)
            mescroll.endSuccess(list.data.length)
          }
        })
    },
    // 跳转到全部回复
    toAllReply(id) {
      this.$u.debounce(() => {
        this.$edu.judgeLogin(() => {
          this.$u.route('pageCourse/course/comment/reply', {
            id: id,
          })
        })
      })
    },
    // 点赞
    getLike(id, like) {
      this.$u.debounce(() => {
        this.$edu.judgeLogin(() => {
          this.$edu.api
            .getCourseCommentLike(id, {
              status: like ? 0 : 1,
            })
            .then((res) => {
              if (this.isChecked) {
                if (like) {
                  this.myCommentData.like = 0
                  this.myCommentData.like_count--
                } else {
                  this.myCommentData.like = 1
                  this.myCommentData.like_count++
                }
              } else {
                let item = this.commentList.find((item) => item.id == id)
                if (like) {
                  item.like = 0
                  item.like_count--
                } else {
                  item.like = 1
                  item.like_count++
                }
              }
            })
        })
      })
    },
    // 点评
    handleRemark() {
      this.$u.debounce(() => {
        this.$edu.judgeLogin(() => {
          if (this.detailsInfo.is_buy === 0) {
            this.$u.toast('购买后才能评论课程')
            return
          }
          this.$u.route('pageCourse/course/comment/add', {
            id: this.detailsInfo.id,
          })
        })
      })
    },
    // 删除评论弹窗
    handleDeleteComment(id) {
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 删除评论提交
    handleDeleteConfirm() {
      this.$edu.api
        .deleteCourseComment(this.deleteCurrentId)
        .then((res) => {
          this.$u.toast(res.msg)
          setTimeout(() => {
            uni.$emit('courseTabUpdate')
          }, 250)
        })
        .catch((err) => {
          this.$u.toast(err.msg)
        })
    },
    onUser(id) {
      this.$edu.judgeLogin(() => {
        this.$edu.route('/pageFound/user/index', {
          id: id,
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.comment-head {
  display: flex;
  align-items: center;
  padding: 36rpx 30rpx 20rpx;
  .star {
    display: flex;
    align-items: center;
    .num {
      font-size: 26rpx;
      color: #ff8a52;
      margin-right: 10rpx;
    }
  }
  .btn {
    margin-left: auto;
    padding: 4rpx 31rpx;
    font-size: 28rpx;
    color: #ff8a52;
    border-radius: 26px;
    border: 1rpx solid #ff8a52;
  }
  .check {
    margin-left: auto;
    /deep/.u-checkbox__label {
      margin-right: 0;
      font-size: 28rpx;
      font-weight: 400;
      color: #606266;
    }
  }
}
.comment {
  display: flex;
  padding: 30rpx;
  .right {
    flex: 1;
    margin-left: 20rpx;
    margin-right: -30rpx;
    padding-right: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f7f7f7;
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .name {
        margin-right: 20rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #606266;
        max-width: 400rpx;
      }
      .modify {
        margin-left: auto;
      }
    }
    .content {
      margin-bottom: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #303133;
      line-height: 46rpx;
    }
    .bottom {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      .date {
        font-size: 24rpx;
        font-weight: 400;
        color: #909399;
      }
      .reply {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 30rpx;
        .num {
          margin-left: 4rpx;
          color: #909399;
          font-size: 24rpx;
        }
      }
      .del {
        font-size: 24rpx;
        font-weight: 400;
        color: #606266;
        margin-left: 24rpx;
      }
      .like {
        display: flex;
        align-items: center;
        .num {
          margin-left: 4rpx;
          color: #909399;
          font-size: 24rpx;
        }
        &.highlight {
          .num {
            color: #ff8a52;
          }
        }
      }
    }
  }
}
</style>
